<template>
    <div class="center">
        <ConsumptionRecordSearch @getParamsData="handleSearchParams" class="search" />
        <ConsumptionRecordTable @getParamsData="handleRemove" :tableData="tableData" />
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { getConsumptionRecord } from "src/httpApi/record";
import ConsumptionRecordSearch from "./ConsumptionRecordSearch.vue";
import ConsumptionRecordTable from "./ConsumptionRecordTable.vue";

// 定义表格数据
const tableData = ref<any[]>([]);
let savedParams = ref({});

// 获取消费记录数据
const getData = async (params?: any) => {
    try {
        const res = params ? await getConsumptionRecord(params) : await getConsumptionRecord();
        tableData.value = res.result; // 根据实际接口返回结构调整
    } catch (error) {
        console.error("获取文件记录数据失败:", error);
    }
};

// 接收 search 子组件传递的参数
const handleSearchParams = (params: any) => {
    savedParams.value = params; // 保存传递过来的参数
    getData(params); // 发起请求
};

// 处理 table 子组件的移除操作后重新请求
const handleRemove = () => {
    getData(savedParams.value); // 使用保存的参数重新发起请求
};

// 组件加载时自动请求数据
onMounted(() => {
    getData();
});
</script>

<style scoped>
.search {
    margin: 20px 0px;
    text-align: left;
}

.center {
    margin: 0 auto;
    width: 90%;
    text-align: center;
}
</style>
